<template>
    <mt-swipe :auto="4000">
        <!-- v-for组件的时候需要给key,避免vue就算key,来提升性能 -->
        <!-- key就是位置标识 -->
        <mt-swipe-item v-for="(item,index) in imgs||myimgs" :key="index">
        <img :src="item.img||item.src" alt="">
        </mt-swipe-item>
    </mt-swipe >
</template>
<script>
export default {
    name:'my-swipe',
    props:['url','imgs'],
    data(){
        return {
            //myimgs:this.imgs
            //myimgs的修改不会影响外部的this.imgs的重新渲染
            //子接收的属性再去做显示，也不能显示成功，内部执行时机问题
            myimgs:[]
            //imgs:this.imgs,//轮播图数据
        }
    },
    created () {
        //父传递给子的组件，子在接收成为自己的属性后，发生改变的话，不会触发试图更新
        //console.log('===',this.imgs);
        //兼容传对象的方式
        if(this.url){
            this.$axios.get(this.url)
            .then(res=>{
            //console.log(res);
            //console.log(res.data.message);
            this.myimgs = res.data;
            })
            .catch(err=>{
            console.log(err);
            })
        } 
    }
}
</script>
<style scoped>
.mint-swipe{
  width: 100%;
  height: 200px;
}
.mint-swipe img{
  width:100%;
}
</style>
